<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute, RouterLink } from 'vue-router'
import { homeConfig } from '@/router/homeConfig.js'
import { NMenu, NButton, NImage, NDivider, useMessage, NIcon, c } from 'naive-ui'
import { LogIn, LogoWechat } from '@vicons/ionicons5'
import { User, Home, Search, Book } from '@vicons/fa'
import { Message2 } from '@vicons/tabler'
import { getAssetsFile } from '@/hooks'
import DraggableModal from '@/components/DraggableModal.vue'

// 消息提示
const message = useMessage()

const router = useRouter()
const route = useRoute()

// 用户登录状态
const isLoggedIn = ref(false)

// 用户信息
const userInfo = ref({
  name: '',
  avatar: ''
})

// 登录弹窗显示状态
const showLoginModal = ref(false)

// 活动菜单键
const activeKey = computed(() => route.path.split('/').pop())

// 计算导航菜单项
const menuItems = computed(() => {
  return homeConfig.map(item => ({
    label: () => h(
      RouterLink,
      {
        to: {
          path: `/lingTach/${item.path}`
        },
      },
      {
        default: () => item.meta.name,
      }
    ),
    key: item.path,
    // icon: getMenuItemIcon(item.path)
  })
  )
})

// 根据路径获取菜单项图标
function getMenuItemIcon(path) {
  return () => h(
    NIcon, null,
    {
      default: () => h({
        home: Home,
        search: Search,
        detail: Book,
        qa: Message2,
        profile: User,
      }[path])
    }
  )
}

// 显示登录弹窗
const showLogin = () => {
  showLoginModal.value = true
}

// 模拟微信登录
const simulateLogoWechatLogin = () => {
  // 模拟登录过程
  setTimeout(() => {
    isLoggedIn.value = true
    userInfo.value = {
      name: '张小明',
      avatar: 'https://picsum.photos/id/1005/200/200'
    }
    showLoginModal.value = false
    message.success('登录成功')
  }, 2000)
}

// 退出登录
const logout = () => {
  isLoggedIn.value = false
  userInfo.value = {
    name: '',
    avatar: ''
  }
  message.info('已退出登录')
}
</script>

<template>
  <div class="app-layout">
    <!-- 头部导航 -->
    <header class="header-nav">
      <!-- 左侧公司logo -->
      <div class="logo-section">
        <NImage
          :src="getAssetsFile('common/logo.jpg')"
          alt="公司Logo"
          class="logo"
        />
        <span class="logo-text">君瓴智能大数据平台</span>
      </div>

      <!-- 中间路由导航 -->
      <div class="nav-section">
        <NMenu
          mode="horizontal"
          v-model:value="activeKey"
          :options="menuItems"
          class="main-menu"
        />
      </div>

      <!-- 右侧用户信息 -->
      <div class="user-section">
        <!-- 已登录状态 -->
        <div v-if="isLoggedIn" class="logged-in">
          <div class="user-info">
            <NImage
              :src="userInfo.avatar"
              alt="用户头像"
              class="user-avatar"
            />
            <span class="user-name">{{ userInfo.name }}</span>
          </div>
          <NButton 
            type="text" 
            danger 
            size="small" 
            @click="logout"
            class="logout-button"
          >
            <LogIn size={16} />
            <span>退出</span>
          </NButton>
        </div>

        <!-- 未登录状态 -->
        <div v-else class="not-logged-in">
          <NButton 
            type="primary" 
            @click="showLogin"
            class="login-button"
          >
            <LogIn size={16} />
            <span>登录/注册</span>
          </NButton>
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
      <RouterView />
    </main>

    <!-- 微信登录弹窗 - 使用 DraggableModal 组件 -->
    <DraggableModal
      v-model:visible="showLoginModal"
      title="微信扫码登录"
      :width="'400px'"
      :draggable="true"
      :show-close="true"
    >
      <div class="login-modal-content">
        <div class="qrcode-section">
          <NImage
            src="https://picsum.photos/id/237/200/200"
            alt="微信登录二维码"
            class="login-qrcode"
          />
          <p class="qrcode-tip">请使用微信扫码登录</p>
        </div>
        <NDivider class="modal-divider" />
        <div class="login-methods">
          <NButton 
            block 
            type="primary" 
            @click="simulateLogoWechatLogin"
            class="login-action-button"
          >
            <LogoWechat size={18} />
            <span>模拟登录</span>
          </NButton>
        </div>
      </div>
    </DraggableModal>
  </div>
</template>

<style scoped lang="scss">
.app-layout {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

// 头部导航
.header-nav {
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(50vw - 600px);
  z-index: 1000;
}

// 左侧公司logo
.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  height: 32px;
  width: auto;
  border-radius: 4px;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

// 中间路由导航
.nav-section {
  flex: 1;
  display: flex;
  justify-content: center;
}

.main-menu {
  width: auto;
}

// 右侧用户信息
.user-section {
  display: flex;
  align-items: center;
}

.logged-in {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.user-name {
  font-size: 14px;
  color: #1f2937;
}

.logout-button {
  color: #ff4d4f;
}

.login-button {
  background-color: #0F8AFF;
  border-color: #0F8AFF;
  &:hover {
    background-color: #0A6BFF;
    border-color: #0A6BFF;
  }
}

// 主内容区域
.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

// 登录弹窗样式
.login-modal-content {
  padding: 20px 0;
}

.qrcode-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.login-qrcode {
  width: 200px;
  height: 200px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.qrcode-tip {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.modal-divider {
  margin: 20px 0;
}

.login-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-action-button {
  background-color: #07c160;
  border-color: #07c160;
  &:hover {
    background-color: #06ad56;
    border-color: #06ad56;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .header-nav {
    padding: 0 16px;
  }
  
  .logo-text {
    display: none;
  }
  
  .nav-section {
    display: none;
  }
  
  .user-name {
    display: none;
  }
}
</style>